<template>
    <div id="app" class="app">
        <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned" :designer-config="designerConfig">
            <!-- 自定义按钮插槽演示 -->
            <template #customToolButtons>
                <el-button type="text" @click="dialogFormVisible = true"><i class="el-icon-finished" />保存</el-button>
            </template>
        </v-form-designer>
        <!-- 自定义按钮插槽演示 -->
        <el-dialog title="保存表单" :visible.sync="dialogFormVisible">
            <el-form :model="data" ref="data" :rules="rule">
                <el-form-item label="表单名称" prop="fromName">
                    <el-input v-model="data.fromName"></el-input>
                </el-form-item>
                <el-form-item label="表单介绍" prop="fromDesc">
                    <el-input type="textarea" v-model="data.fromDesc" maxlength="40" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="
                        saveFormJson('data');
                        dialogFormVisible = false;
                    "
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { putfrom, getIdfrom } from '@/api/from.js/';
export default {
    name: 'App',
    data() {
        return {
            fieldListApi: {
                URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
                labelKey: 'fieldLabel',
                nameKey: 'fieldName'
            },
            data: {
                id:'',
                fromName: '',
                fromJson: '',
                fromDesc: '',
                delete: 0,
                Name: ''
            },
            rule: {
                fromName: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
                fromDesc: [
                    { required: true, message: '请输入表单介绍', trigger: 'blur' },
                    { min: 1, max: 40, message: '长度在 1到 40 个字符', trigger: 'blur' }
                ]
            },
            dialogFormVisible: false,
            testBanned: [
                //'sub-form',
                //'alert',
            ],

            designerConfig: {
                languageMenu: true,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: false,
                previewFormButton: false

                //presetCssCode: '.abc { font-size: 16px; }',
            }
        };
    },
    mounted() {
        this.GetFrom();
    },
    methods: {
         GetFrom() {
            getIdfrom(this.$route.query.id).then((res) => {
                console.log(res);
                this.$refs.vfDesigner.setFormJson(JSON.parse(res.fromJson));
                this.data.Name=res.createName
                this.data.fromName=res.fromName
                this.data.fromDesc=res.fromDesc
                this.data.id=res.id
            });
        },
        saveFormJson(data) {
            this.$refs[data].validate((valid) => {
                if (valid) {
                    //alert('submit!');
                    let formJson = this.$refs.vfDesigner.getFormJson();
                    //TODO: 将formJson提交给后端保存接口，需自行实现！！
                    console.log(formJson.widgetList);
                    this.data.fromJson = JSON.stringify(formJson);
                    this.data.createName = localStorage.getItem('UserName');
                    console.log(this.data);
                    putfrom(this.data).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.message);
                            this.$router.push('/FromShow');
                        } else {
                            this.$message.info(res.message);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
       
    }
};
</script>
<style>
.app {
    height: 100%;
}
</style>